<template>
  <div>
    <x-header>
      任务详情
      <router-link to="/" slot="right">
        <a class="fa fa-home fa-15x"></a>
      </router-link>
    </x-header>
    <div class="detail-box">
      <van-tabs v-if="menu.length > 0" v-model="active" @change="changeFirstTabs">
        <van-tab :title="tab1.name" v-for="tab1 in menu" :key="tab1.id" :name="tab1.id">
          <van-tabs v-if="tab1.child && tab1.child.length > 0" v-model="subActive" swipeable name="id"
            class="tabs-second" @change="getForm">
            <van-tab v-for="tab2 in tab1.child" :key="tab2.id + '_' + tab2.formKey" :title="tab2.name"
              :name="tab2.id + '_' + tab2.formKey">
              <scroller ref="myscroll1" class="scroll-view" style="top: 56px;"
                :height="String(Number(scrollHeight) - (59 * 2))">
                <div class="gzbank-style">
                  <div v-if="form.type == 'INNER'">
                    <ab-custom-form></ab-custom-form>
                  </div>
                  <div v-if="form.type == 'FRAME'">
                    <ab-url-form ref="urlForm" :form="form"></ab-url-form>
                  </div>
                </div>
              </scroller>
            </van-tab>
          </van-tabs>
          <div v-if="!tab1.child || tab1.child.length <= 0">
            <scroller ref="myscroll1" class="scroll-view" style="top: 56px;"
              :height="String(Number(scrollHeight) - 59)">
              <div style="padding-bottom: 20px;">
                <van-cell-group inset>
                  <van-cell title="任务编号" :value="taskDetailInfo.taskPool.id" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="任务状态" :value="taskDetailInfo.taskPool.statusName" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="经办机构" :value="taskDetailInfo.taskPool.taskOrgName" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="流程环节" :value="taskDetailInfo.task ? taskDetailInfo.task.categoryName : ''"
                    title-class="cell-title" value-class="cell-value" />
                  <van-cell title="经办人" :value="taskDetailInfo.taskPool.userName" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="流程环节经办人" :value="taskDetailInfo.task ? taskDetailInfo.task.assigneeNames : ''"
                    title-class="cell-title" value-class="cell-value" />
                  <van-cell title="创建时间" :value="taskDetailInfo.taskPool.createTime" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="发起时间" :value="taskDetailInfo.task ? taskDetailInfo.task.assigneeNames : ''"
                    title-class="cell-title" value-class="cell-value" />
                  <van-cell title="进件方式" :value="taskDetailInfo.taskPool.initCaseMode" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="进件渠道" :value="taskDetailInfo.taskPool.initCaseChannel" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="业务产品" :value="taskDetailInfo.taskPool.prodNam" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="贷款用途" :value="taskDetailInfo.taskPool.loanUse" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="贷款主体" :value="taskDetailInfo.taskPool.custType" title-class="cell-title"
                    value-class="cell-value" />
                  <van-cell title="是否有营业执照" :value="taskDetailInfo.taskPool.businessLicense" title-class="cell-title"
                    value-class="cell-value" />
                </van-cell-group>
              </div>
            </scroller>
          </div>
        </van-tab>
      </van-tabs>
      <div v-if="menu.length <= 0 && (JSON.stringify(taskDetailInfo) && JSON.stringify(taskDetailInfo) != '{}')">
        <scroller ref="myscroll1" class="scroll-view" style="top: 56px;" :height="scrollHeight">
          <div style="padding-bottom: 20px;">
            <van-cell-group inset>
              <van-cell title="任务编号" :value="taskDetailInfo.taskPool.id" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="任务状态" :value="taskDetailInfo.taskPool.statusName" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="经办机构" :value="taskDetailInfo.taskPool.taskOrgName" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="流程环节" :value="taskDetailInfo.task ? taskDetailInfo.task.categoryName : ''"
                title-class="cell-title" value-class="cell-value" />
              <van-cell title="经办人" :value="taskDetailInfo.taskPool.userName" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="流程环节经办人" :value="taskDetailInfo.task ? taskDetailInfo.task.assigneeNames : ''"
                title-class="cell-title" value-class="cell-value" />
              <van-cell title="创建时间" :value="taskDetailInfo.taskPool.createTime" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="发起时间" :value="taskDetailInfo.task ? taskDetailInfo.task.assigneeNames : ''"
                title-class="cell-title" value-class="cell-value" />
              <van-cell title="进件方式" :value="taskDetailInfo.taskPool.initCaseMode" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="进件渠道" :value="taskDetailInfo.taskPool.initCaseChannel" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="业务产品" :value="taskDetailInfo.taskPool.prodNam" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="贷款用途" :value="taskDetailInfo.taskPool.loanUse" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="贷款主体" :value="taskDetailInfo.taskPool.custType" title-class="cell-title"
                value-class="cell-value" />
              <van-cell title="是否有营业执照" :value="taskDetailInfo.taskPool.businessLicense" title-class="cell-title"
                value-class="cell-value" />
            </van-cell-group>
          </div>
        </scroller>
      </div>
    </div>
    <!-- <bpm-buttons :buttons="buttons" class="gzbank-style"></bpm-buttons> -->
    <div v-if="dynamicComponent.show" :is="dynamicComponent.key" @cancel="dynamicComponent.show = false"
      @callback="dynamicComponent.callback" :name="dynamicComponent.name" :show-dialog="dynamicComponent.show"
      :passConf="dynamicComponent.flowParam"></div>
  </div>
</template>

<script>
  import Vue from "vue";
  import bpmService from "@/service/bpm/bpmService";
  import formService from "@/service/form/formService";
  import {
    Tab,
    Tabs,
    Cell,
    CellGroup
  } from 'vant';
  import VueScroller from "vue-scroller";

  export default {
    name: "taskForm",
    components: {
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup
    },
    methods: {
      getTaskData() {
        console.log("on item click");
      },

      /**
       * 获取任务详情
       * @param {Object} id
       * @param {Object} taskId
       */
      getTaskInfo(id, taskId) {
        let data = {
          id
        }
        if (taskId) {
          data.taskId = taskId
        }
        this.$vux.loading.show({
          text: '加载中...'
        })
        let that = this
        this.baseService.post(this.__ctx + "/taskPool/queryTaskInfo", data).then((res) => {
          this.$vux.loading.hide()
          if (res.isOk) {
            let result = res.data
            this.taskDetailInfo = result
            if (taskId) {
              this.getMenuList(result.task.nodeId)
            }
          } else {
            this.$vux.toast.show({
              type: 'warn',
              text: res.msg,
              onHide() {
                that.$router.back()
              }
            })
          }
        }).catch(err => {
          this.$vux.loading.hide()
          this.$vux.toast.show({
            type: 'warn',
            text: '获取任务信息失败！',
            onHide() {
              that.$router.back()
            }
          })
        });
      },

      /**
       * 获取tab签
       * @param {Object} nodeId
       */
      getMenuList(nodeId) {
        this.$vux.loading.show({
          text: '加载中...'
        })
        this.baseService.postForm(this.__ctx + "/bpm/bpmCategory/getMenuList", {
          'def_id_^VEQ': this.defId,
          currentNode: this.defId + "_" + nodeId,
          instId: this.instId,
          needAllNode: true
        }).then((res) => {
          let result = res.data
          this.$vux.loading.hide()
          if (result.length > 0) {
            let detail = {
              disabled: false,
              id: "taskInfo",
              name: "任务详情"
            }
            result.unshift(detail)
            this.menu = result
            this.initForm(nodeId)
          }
          // this.findNode();
        });
      },

      /**
       * 初始化表单信息
       * @param {Object} nodeId
       */
      initForm(nodeId) {
        var thisVue = this
        this.baseService.postForm(this.__ctx + "/bpm/instance/getInstanceData", {
          instanceId: this.instId,
          formType: 'mobile',
          nodeId: nodeId,
          isReadOnly: true
        }).then((res) => {
          let result = res.data
          thisVue.resultData = res.data
          formService.initCustFormFu(result.form.formHtml, result, this)
          thisVue.form = result.form
          thisVue.buttons = result.buttonList
          thisVue.task = result.task
          thisVue.instance = result.instance;
          thisVue.flowRequestParam = result.flowRequestParam;
          thisVue.configSpecified = result.configSpecified;
        });
      },

      getForm(name) {
        this.$vux.loading.show({
          text: '加载中...'
        })
        var id = name.split('_')[0];
        var formKey = name.split('_')[1];
        var thisVue = this;
        let url = this.__ctx + "/form/formDataService/getTaskData/" + formKey;
        this.baseService.get(url, {}).then((res) => {
          thisVue.$vux.loading.hide()
          let data = thisVue.resultData;
          let form = {
            formEmpty: false,
            formHtml: res.data.html,
            formValue: id,
            id: "",
            name: res.data.title,
            type: "INNER"
          };
          data.form = form;
          data.permission = res.data.permission;
          formService.initCustFormFu(res.data.html, data, thisVue);
          // thisVue.data.form = form;
          thisVue.form = form
        }).catch(err => {
          console.error(err)
          thisVue.$vux.loading.hide()
        })


      },

      /**
       * 第一级tab change事件
       * @param {Object} name
       */
      changeFirstTabs(name) {
        if (name == 'taskInfo') {
          return
        }
        let menu = this.menu
        let data = menu.find(v => v.id === name)
        this.subActive = data.child[0].id + '-' + data.child[0].formKey
        this.getForm(data.child[0].id + '-' + data.child[0].formKey)
      },

      /**
       * 第二级tab change事件
       * @param {Object} name
       */
      changeSecondTabs(name) {
        console.log(name)
      }
    },
    data: function() {
      return {
        task: "",
        instance: "",
        form: "",
        buttons: "",
        flowRequestParam: {}, // 最终提交的数据
        configSpecified: {}, // 流程配置信息
        dynamicComponent: {
          key: "opinion-dialog",
          show: false,
        },
        taskDetailInfo: {},
        data: {},
        menu: [],
        active: 0,
        subActive: 0,
        scrollHeight: '0',
        showPage: false,
        resultData: {}
      };
    },
    created: function() {
      this.taskId = this.$route.query.taskId;
      this.defId = this.$route.query.defId;
      this.instId = this.$route.query.instId;
      this.id = this.$route.query.id;
      let divHeight = window.screen.availHeight;
      this.scrollHeight = String(divHeight - 46)
      this.getTaskInfo(this.id, this.taskId)
      // var thisVue = this;
      // bpmService.init({
      //    taskId: this.taskId,
      //     formType: "mobile"
      //   },
      //   function(data) {
      //     formService.initCustFormFu(data.form.formHtml, data);
      //     thisVue.form = data.form;
      //     thisVue.task = data.task;
      //     thisVue.buttons = data.buttonList;
      //     thisVue.instance = data.instance;
      //     thisVue.flowRequestParam = data.flowRequestParam;
      //     thisVue.configSpecified = data.configSpecified;
      //   }
      // );
    },
  };
</script>

<style lang="less" scoped>
  .cell-title {
    font-size: 16px;
    color: #1D2129;
  }

  .cell-value {
    font-size: 14px;
    color: #1D2129;
  }

  /deep/ .van-cell-group--inset {
    margin: 0 12px;
  }

  /deep/ .van-cell {
    padding: 14px 16px;
  }
</style>
